<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>木毛旅行社 - 注册</title>
	<style>
		:root {
			--primary-color: #3498db;
			--secondary-color: #2980b9;
			--accent-color: #e74c3c;
			--light-bg: #f8f9fa;
			--dark-bg: #2c3e50;
			--text-color: #333;
			--light-text: #fff;
			--border-radius: 8px;
			--box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			--transition: all 0.3s ease;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Helvetica Neue', Arial, sans-serif;
			color: var(--text-color);
			line-height: 1.6;
			background-color: var(--light-bg);
			display: grid;
			grid-template-rows: auto 1fr;
			min-height: 100vh;
		}

		header {
			background-color: var(--light-text);
			box-shadow: var(--box-shadow);
			position: sticky;
			top: 0;
			z-index: 100;
		}

		.center {
			width: 90%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 15px;
		}

		.logo {
			color: var(--dark-bg);
			font-size: 2rem;
			margin: 0.5em 0;
			text-align: center;
		}

		nav ul.link {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 1.5em;
			list-style: none;
			padding: 1em 0;
		}

		nav ul.link li a {
			color: var(--text-color);
			text-decoration: none;
			font-weight: 500;
			padding: 0.5em 1em;
			border-radius: var(--border-radius);
			transition: var(--transition);
		}

		nav ul.link li a:hover,
		nav ul.link li.active a {
			color: var(--light-text);
			background-color: var(--primary-color);
		}

		#search {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2em 0;
		}

		#login {
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			padding: 2.5em;
			width: 100%;
			max-width: 400px;
			transition: var(--transition);
		}

		#login:hover {
			box-shadow: 0 8px 24px rgba(0,0,0,0.15);
		}

		.login-header {
			display: flex;
			justify-content: center;
			margin-bottom: 2em;
			font-size: 1.2rem;
		}

		.login-header span {
			padding: 0 15px;
			cursor: pointer;
			position: relative;
			transition: var(--transition);
		}

		.login-header span.active {
			color: var(--primary-color);
			font-weight: 600;
		}

		.login-header span.active::after {
			content: '';
			position: absolute;
			bottom: -8px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: var(--primary-color);
		}

		.login-header b {
			color: #ccc;
		}

		.input-group {
			margin-bottom: 1.5em;
			position: relative;
		}

		.input-group input {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			font-size: 1rem;
			transition: var(--transition);
		}

		.input-group input:focus {
			border-color: var(--primary-color);
			outline: none;
			box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
		}

		.password-strength {
			height: 4px;
			background: #eee;
			margin-top: 8px;
			border-radius: 2px;
			overflow: hidden;
		}

		.password-strength-bar {
			height: 100%;
			width: 0;
			background: var(--accent-color);
			transition: width 0.3s ease;
		}

		.button {
			width: 100%;
			padding: 12px;
			background-color: var(--primary-color);
			color: white;
			border: none;
			border-radius: var(--border-radius);
			font-size: 1.1rem;
			font-weight: 500;
			cursor: pointer;
			transition: var(--transition);
			margin-top: 1em;
		}

		.button:hover {
			background-color: var(--secondary-color);
		}

		.error-message {
			color: var(--accent-color);
			text-align: center;
			margin-top: 1em;
			font-size: 0.9rem;
		}

		.terms {
			text-align: center;
			margin-top: 1.5em;
			font-size: 0.8rem;
			color: #666;
			line-height: 1.5;
		}

		.terms a {
			color: var(--primary-color);
			text-decoration: none;
		}

		.terms a:hover {
			text-decoration: underline;
		}

		.footer-links {
			text-align: center;
			margin-top: 1.5em;
			font-size: 0.9rem;
		}

		.footer-links a {
			color: var(--primary-color);
			text-decoration: none;
			margin: 0 10px;
		}

		.footer-links a:hover {
			text-decoration: underline;
		}

		@media (max-width: 768px) {
			nav ul.link {
				gap: 0.5em;
			}

			nav ul.link li a {
				padding: 0.5em;
				font-size: 0.9rem;
			}

			#login {
				padding: 1.5em;
			}
		}
	</style>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			const passwordInput = document.querySelector('input[name="password"]');
			const confirmInput = document.querySelector('input[name="confirm"]');
			const strengthBar = document.querySelector('.password-strength-bar');

			if (passwordInput) {
				passwordInput.addEventListener('input', function() {
					const password = this.value;
					let strength = 0;

					// 长度检查
					if (password.length > 0) strength += 20;
					if (password.length >= 8) strength += 20;

					// 复杂度检查
					if (/[A-Z]/.test(password)) strength += 20;
					if (/[0-9]/.test(password)) strength += 20;
					if (/[^A-Za-z0-9]/.test(password)) strength += 20;

					strengthBar.style.width = strength + '%';

					// 更新颜色
					if (strength < 40) {
						strengthBar.style.backgroundColor = var('--accent-color');
					} else if (strength < 80) {
						strengthBar.style.backgroundColor = '#ffc107';
					} else {
						strengthBar.style.backgroundColor = '#28a745';
					}
				});
			}

			if (confirmInput && passwordInput) {
				confirmInput.addEventListener('input', function() {
					if (this.value !== passwordInput.value) {
						this.setCustomValidity('密码不匹配');
					} else {
						this.setCustomValidity('');
					}
				});
			}
		});
	</script>
</head>
<body>
<header id="header">
	<div class="center">
		<h1 class="logo">木毛旅行社</h1>
		<nav>
			<ul class="link">
				<li><a href="/index">首页</a></li>
				<li><a href="/information">旅游咨询</a></li>
				<li><a href="/buy">机票订购</a></li>
				<li><a href="/scenery">风景欣赏</a></li>
				<li class="active"><a href="/register">注册</a></li>
			</ul>
		</nav>
	</div>
</header>

<div id="search">
	<div id="login">
		<form action="/register" method="POST">
			<div class="login-header">
				<span onclick="window.location='/login'">登录</span>
				<b>·</b>
				<span class="active">注册</span>
			</div>

			<div class="input-group">
				<input class="input" name="username" placeholder="用户名" type="text" required>
			</div>

			<div class="input-group">
				<input class="input" name="password" placeholder="密码" type="password" required>
				<div class="password-strength">
					<div class="password-strength-bar"></div>
				</div>
			</div>

			<div class="input-group">
				<input class="input" name="confirm" placeholder="确认密码" type="password" required>
			</div>

			<button type="submit" class="button">注 册</button>

			<!-- 错误提示 -->
			{{ if .msg }}
			<p class="error-message">{{ .msg }}</p>
			{{ end }}

			<div class="terms">
				点击"注册"即表示您同意并愿意遵守
				<a href="https://www.baidu.com">用户协议</a> 和 <a href="https://www.baidu.com">隐私政策</a>。
			</div>

			<div class="footer-links">
				已有账号？<a href="/login">立即登录</a>
			</div>
		</form>
	</div>
</div>
</body>
</html>